<template>
  <div class="main" v-loading="loading">
    <div>
      <header>
        <div class="two_header">
          <p class="two_Title">客户在线签约中心</p>
          <div class="two_content">
            <div class="two_text">
              <p class="two_text_Title">尊敬的{{ form.name }}您好：</p>
              <p class="two_text_content">
                您当前正在与我方完成“分期宝”产品代扣在线签约，请根据在线签约提醒完成以下信息的确认及操作。( 注：该签约仅一次有效。)
              </p>
            </div>
            <div class="two_img"></div>
          </div>
        </div>
      </header>
      <article style="padding:20px">
        <p class="title">基本信息核对：</p>
        <ul>
          <li>
            <span>姓名：</span><span>{{ form.name }}</span>
          </li>
          <li>
            <span>身份证号：</span><span>{{ form.idCard }}</span>
          </li>
          <li>
            <span>手机号：</span><span>{{ form.phoneNumber }}</span>
          </li>
          <li>
            <span>代扣银行卡：</span><span>{{ form.bankCardNumber }}</span>
          </li>
          <li>
            <span>开户行：</span><span>{{ form.bankDeposit }}</span>
          </li>
        </ul>
        <p class="title">代扣信息核对：</p>
        <ul>
          <li>
            <span>分期金额：</span><span>{{ form.stagesMoney }}</span>
          </li>
          <li>
            <span>代扣起始月：</span><span>{{ form.beginHoldMouth }}</span>
          </li>
          <li>
            <span>每月扣款日：</span><span>{{ form.withHoldDay }}</span>
          </li>
          <li>
            <span>期数：</span><span>{{ form.periodsNumber }}</span>
          </li>
          <li>
            <span>本金：</span><span>{{ form.principalMoney }}</span>
          </li>
        </ul>
        <!-- <p class="title" style="margin-bottom:15px">代扣电子合同：</p>
        <div class="hetong">代扣电子合同</div> -->
        <p class="phone">
          请确认{{ form.phoneNumber }}手机号为您银行卡预留手机号
        </p>
        <p class="number">有疑问请联系：023-5446558</p>
      </article>
      <footer style="padding:0 20px 20px 20px">
        <el-button class="btn" type="primary" @click="subim" :disabled="disabled"
          >确认无误并生成合同</el-button
        >
      </footer>
    </div>
  </div>
</template>

<script>
import { getFind, getGenContract } from "../assets/js/api";
// import $ from "jquery";
export default {
  name: "Login",
  data() {
    return {
      id: 2,
      form: {},
      loading: false,
      disabled: false
    };
  },
  created() {
    this.id = sessionStorage.getItem("userId");
    this.getFind();
  },
  // mounted() {
  //   window.onbeforeunload = function() {
  //     localStorage.clear();
  //     sessionStorage.clear();
  //   };
  // },
  methods: {
    getFind() {
      getFind(this.id).then(res => {
        if (res.code == 200) {
          this.form = res.data;
        } else {
          this.$router.push({
            path: "/sign/index/timeOut"
          });
        }
      });
    },
    subim() {


      this.$router.push({
        path: "/sign/index/signUp"
      });


      this.loading = true;
      getGenContract(this.id).then(res => {
        if (res.code == 200) {
          this.loading = false;
          this.disabled = true;
          this.$router.push({
            path: "/sign/index/signUp"
          });
        } else {
          this.loading = false
          this.$message({
            message: res.message,
            type: "error"
          });
        }
      });

    }
  }
};
</script>

<style scoped lang="less">
body {
  min-width: 300px;
  overflow-y: scroll;
}
.main {
  width: 100%;
  background-color: #f8f8f8;
}
.two_header {
  width: 100%;
  height: 209px;
  background: url(../assets/img/backgroundSign.png) no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.two_Title {
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #ffffff;
  padding-top: 27px;
  margin: 0 27px;
  text-align: left;
}
.two_content {
  width: calc(100% - 40px);
  height: 140px;
  margin: 0 20px;
  position: absolute;
  bottom: 0;
  background-color: #ffffff;
  box-shadow: 0 0 36px 36px rgba(0, 0, 0, 0.03);
  border-radius: 6px;
}
.two_text {
  width: 260px;
  margin: 20px 0 0 15px;
}
.two_text_Title {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  text-align: left;
  margin-bottom: 5px;
}
.two_text_content {
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #999999;
  text-indent: 32px;
  text-align: left;
  line-height: 24px;
  width: 80%;
  position: absolute;
  z-index: 2;
}
.two_img {
  width: 90px;
  height: 70px;
  position: absolute;
  bottom: 0;
  right: 12px;
  background: url(../assets/img/peopleSign.png) no-repeat;
  background-size: 100% 100%;
}
.title {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  text-align: left;
}
ul {
  text-align: left;
  background-color: white;
  padding: 15px;
  margin: 15px 0;
  line-height: 32px;
  font-size: 14px;
  color: #333333;
}
.hetong {
  width: 100%;
  height: 50px;
  background-color: white;
}
.phone {
  padding: 18px 0 18px 10px;
  margin: 10px 0 26px 0;
  font-size: 14px;
  background-color: white;
  color: #333333;
}
.number {
  font-size: 14px;
  color: #333333;
}
.btn {
  border-radius: 25px;
  width: 100%;
}
</style>
